import React, { useCallback, useEffect, useMemo } from 'react'

import VCard from '../../../components/VCard'
import { getVehicleCountByStatus, getVehicleInfoList } from './service'
import { Button, Spin, message } from 'antd'
import { ExportToExcel } from '../../../utils/export'


interface VehicleStatusType {
  status: string
  count: number
}
export default function VehicleStatusOverview() {
  const [vehicleStatus, setvehicleStatus] = React.useState<VehicleStatusType[]>([])
  const PieOption = () => {
    return {
    title: {
      text: '车辆状态饼图',

      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        bottom: 'bottom',
        right: 'right',
        name: 'name',
        type: 'pie',
        radius: '50%',
        data: 
          vehicleStatus.map(item => {
            return {
              value: item.count,
              name: item.status
            }
          })
        ,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }}
  const [vehicleInfo, setvehicleInfo] = React.useState<any[]>([])
  const [loading, setLoading] = React.useState(false)

  const Columns = [
    {
      title: '车牌号',
      dataIndex: 'vehicle_id',
      search:true,
      ellipsis: true,
    },
    {
      title: ' 驾驶员工号',
      dataIndex: 'driver_id',
    },
    {
      title: '车队号',
      dataIndex: 'fleet_id',
     
    },
    {
      title:'品牌',
      dataIndex:'branch'
    },
    {
      title:'型号',
      dataIndex:'model',
      ellipsis: true,
    },
    {
      title:'类型',
      dataIndex:'type'
    },
    {
      title:"里程",
      dataIndex:'mileage',
      sorter: (a: any, b: any) => a.mileage - b.mileage,
    }
  ];
  const queryList = async () => {
    setLoading(true)
    await getVehicleCountByStatus().then(res => {
      setvehicleStatus(res.data.data)
    })
    await getVehicleInfoList().then(res => {
      setvehicleInfo(res.data.data)
    })
    setLoading(false)
  }
  useEffect(() => {
    queryList()
  }, [])
  return (
    <div className="page-content-container">
      <div className="page-title-container">
        <div className="page-title">车辆状态一览</div>
      </div>
      <div className="page-content">
        {/* <VTable></VTable> */}
        {/* <VCard type="card"></VCard> */}
        <Spin spinning={loading}>
          <div className="VCard-list">
            <VCard type={'cards'} title={'车辆'} dataSource={vehicleStatus}></VCard>
          </div>
          <div className="VCard-list">
          <VCard title={'车辆信息档案'} type={'table'} columns={Columns} dataSource={vehicleInfo}></VCard>
          <Button
              type='primary'
              className='export-btn'
              onClick={() => {
                ExportToExcel('/api/home/export', '车辆档案.xlsx');
              }}>
              导出
            </Button>
          </div>
          <div className="VCard-list">
            <VCard title={'车辆状态分布'} type={'pie'} dataSource={PieOption()}></VCard>
          </div>
      
        </Spin>
      </div>
    </div>
  )
}
